نمایش view های مختلف داخل Tab در Bootstrap

پاسخ هوش مصنوعی

برای اینکه بتوانید ویوهای مختلف را داخل تب ها نمایش دهید و همچنین تب فعال به صورت پیش فرض بارگذاری شود، نیاز دارید که از AJAX استفاده کنید. با این کار، شما محتویات تب را بدون بارگذاری مجدد صفحه و یا حذف سایر تب ها بارگذاری خواهید کرد.

در زیر کد مورد نیاز را مشاهده می کنید:

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#" data-toggle="tab" class="tab-link" data-url="@Url.Action("Index", "LetterList")">
            <i class="icon-book2"></i><span style="float:right;">لیست نامه ها</span>
        </a>
    </li>
    <li>
        <a href="#" data-toggle="tab" class="tab-link" data-url="@Url.Action("Index", "ArchiveLetterList")">
            <i class="icon-enter5"></i><span>نامه های بایگانی شده</span>
        </a>
    </li>
</ul>

<div id="tabContent"></div>

<script>
    $(document).ready(function(){
        loadTabContent($('.tab-link.active'));
        
        $('.tab-link').click(function(e){
            e.preventDefault();
            loadTabContent($(this));
        });
        
        function loadTabContent(link) {
            var url = link.data('url');
            $('#tabContent').load(url);
            $('#myTab li').removeClass('active');
            link.parent().addClass('active');
        }
    });
</script>

در این کد:

• ما از ویژگی data-url برای هر لینک تب استفاده کردیم تا URL مرتبط با هر Action مشخص شود.
• هنگامی که صفحه بارگذاری می شود، محتوای اولین تب (که فعال است) به صورت پیش فرض بارگذاری می شود.
• با کلیک بر روی هر تب، محتوای مربوط به آن با استفاده از AJAX بارگذاری می شود و محتوای قبلی حذف نمی شود.

مطمین شوید که URL های درون data-url به درستی به اکشن های کنترلر شما اشاره دارند. این روش به شما اجازه می دهد تا محتوای تب های خود را به راحتی و بدون بارگذاری مجدد صفحه مدیریت کنید.

ببینید این روشی که شما استفاده کردید برای کاری که می خواهید انجام بدید جواب نمیده. دلیلش رو هم میگم خدمتتون.

هر View در Core و در MVC یک آدرس منحصر به فرد خودش رو داره. همونطوری که خود شما کدهای Html رو نوشتید :

<li class="active">
   //LetterList/Index
   <a asp-controller="LetterList" asp-action="Index">
      <i class="icon-book2"></i><span style="float:right;">لیست نامه ها</span>
   </a>
</li>
<li>
   //ArchiveLetterList/Index
   <a asp-controller="ArchiveLetterList" asp-action="Index">
      <i class="icon-enter5"></i><span>نامه های بایگانی شده</span>
   </a>
</li>

در کد بالا براتون مشخص کردم که هر کدوم از تگ های a شما چه مسیری دارن. در واقع وقتی شما روی یک تگ a کلیک می کنید مسیری که در این تگ مشخص شده صدا زده میشه و پروژه شما به سمت کنترلر مشخص شده و از اونجا Action مشخص شده صدا زده میشه و صفحه رفرش میشه و View صدا زده شده نمایش داده میشه.

بنابراین این انتظار که شما روی تگ های a کلیک کنید بدون اینکه صفحه رفرش بشه و در همون Tab مورد نظر باقی بمونید انتظار صحیحی نیست. برای این کار شما نباید از View های مختلفی استفاده کنید. در واقع باید یک View طراحی کنید و بخش های مختلف رو هم توی همون View داشته باشید و فقط با کلیک کردن روی Tab بخش مورد نظرتون رو hide و یا show کنید.

با سلام

موردی که شما فرمودید یک ویو داشته باشم و همه بخشهای مختلف را دا خل آن انجام بدم درست هست. ولی در نظر بگیرید این صفحه قرار هست مثلا ۱۰ تا تب داشته باشه و هر کدام از این تبها اطلاعات مربوط به یک جدول از دیتابیس را نمایش بده. با توجه به راهی که شما فرمودید هنگام لود شدن صفحه تمام این ۱۰ تب باید به دیتابیس در یک لحظه وصل بشند تا اطلاعات را اماده نمایش داشته باشند تا در صورت کلیک روی تب مربوطه نمایش بدند.

در صورتی که یک بار زیادی روی سرور و زمان زیادی را سمت کلایت برای نمایش میذاره. من میخوام هنگام کلیک رو تب در همان لحظه به جدول مورد نظر وصل شده و اطلاعات را نمایش بده.

با سپاس